<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="language" content="english">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="https://app.example/katex.min.css" />

    <link rel="stylesheet" href="https://app.example/monokai-sublime.min.css" />

    <link rel="stylesheet" href="https://app.example/quill.snow.css" />

    <style>
        body > 
        /* #standalone-container {
            margin: 50px auto;
            height: 100%;
                
        } */

        #editor-container {
            height: 100%;
        }

        #wino-original-message-container {
            border: solid #636e72;
            margin-top: 5px;
        }
    </style>
</head>
<body bgcolor="white">
    <div id="standalone-container">
        <!-- remove display none to enable toolbar -->
        <div id="toolbar-container" style="display: none;">
            <span class="ql-formats">
                <!-- <button id="ql-font-monospace" class="ql-font" value="monospace" />
                <button id="ql-font-serif" class="ql-font" value="serif" />
                <button id="ql-font-sans-serif" class="ql-font" /> -->
                <select class="ql-font"></select>
                <select class="ql-size"></select>
            </span>
            <span class="ql-formats">
                <button id="boldButton" class="ql-bold"></button>
                <button id="italicButton" class="ql-italic"></button>
                <button id="underlineButton" class="ql-underline"></button>
                <button id="strikeButton" class="ql-strike"></button>
            </span>
            <span class="ql-formats">
                <select class="ql-color"></select>
                <select class="ql-background"></select>
            </span>
            <span class="ql-formats">
                <button class="ql-script" value="sub"></button>
                <button class="ql-script" value="super"></button>
            </span>
            <span class="ql-formats">
                <button class="ql-header" value="1"></button>
                <button class="ql-header" value="2"></button>
                <button class="ql-blockquote"></button>
                <button class="ql-code-block"></button>
            </span>
            <span class="ql-formats">
                <button id="orderedListButton" class="ql-list" value="ordered"></button>
                <button id="bulletListButton" class="ql-list" value="bullet"></button>
                <button id="decreaseIndentButton" class="ql-indent" value="-1"></button>
                <button id="increaseIndentButton" class="ql-indent" value="+1"></button>
            </span>
            <span class="ql-formats">
                <button id="directionButton" class="ql-direction" value="rtl"></button>
                <button id="ql-align-left" class="ql-align" value=""></button>
                <button id="ql-align-center" class="ql-align" value="center"></button>
                <button id="ql-align-right" class="ql-align" value="right"></button>
                <button id="ql-align-justify" class="ql-align" value="justify"></button>
                <!--<select id="alignmentButton" class="ql-align"></select>-->
            </span>
            <span class="ql-formats">
                <button class="ql-link"></button>
                <button id=addImageButton class="ql-image"></button>
                <button class="ql-video"></button>
                <button class="ql-formula"></button>
            </span>
            <span class="ql-formats">
                <button class="ql-clean"></button>
            </span>
        </div>
    </div>

    <div id="editor-container" style="background-color: white;">
        <br><br>Sent from <a href="https://github.com/bkaankose/Wino-Mail/">Wino Mail</a> for Windows
    </div>

    <!-- <div id="mail-container-parent" hidden="true" style="border: solid #636e72; padding: 10px; margin-top: 5px; margin-right: 16px; margin-bottom: 5px; margin-left: 5px;">
        <center>
            Original message<br>
        </center>

        <div id="mail-container" style="margin-top: 5px;">

        </div>
    </div> -->

    <script src="https://app.example/katex.min.js"></script>

    <script src="https://app.example/highlight.min.js"></script>

    <!-- <script src="../quill.min.js"></script>
    <script src="../image-resize.min.js"></script> -->

    <script src="https://app.example/quill.min.js"></script>
    <script src="https://app.example/image-resize.min.js"></script>
    
    <script>
        // configure Quill to use inline styles so the email's format properly
        var resizer = Quill.import('modules/imageResize');
        Quill.register(resizer, true);

        var DirectionAttribute = Quill.import('attributors/attribute/direction');
        Quill.register(DirectionAttribute, true);

        var AlignClass = Quill.import('attributors/class/align');
        Quill.register(AlignClass, true);

        var BackgroundClass = Quill.import('attributors/class/background');
        Quill.register(BackgroundClass, true);

        var ColorClass = Quill.import('attributors/class/color');
        Quill.register(ColorClass, true);

        var DirectionClass = Quill.import('attributors/class/direction');
        Quill.register(DirectionClass, true);

        var FontClass = Quill.import('attributors/class/font');
        Quill.register(FontClass, true);

        var SizeClass = Quill.import('attributors/class/size');
        Quill.register(SizeClass, true);

        var AlignStyle = Quill.import('attributors/style/align');
        Quill.register(AlignStyle, true);

        var BackgroundStyle = Quill.import('attributors/style/background');
        Quill.register(BackgroundStyle, true);

        var ColorStyle = Quill.import('attributors/style/color');
        Quill.register(ColorStyle, true);

        var DirectionStyle = Quill.import('attributors/style/direction');
        Quill.register(DirectionStyle, true);

        var FontStyle = Quill.import('attributors/style/font');
        Quill.register(FontStyle, true);

        var SizeStyle = Quill.import('attributors/style/size');
        Quill.register(SizeStyle, true);

        var quill = new Quill('#editor-container', {
            modules: {
                toolbar: '#toolbar-container',
                imageResize: {}
            },
            placeholder: '',
            theme: 'snow'
        });


        var boldButton = document.getElementById('boldButton');
        var italicButton = document.getElementById('italicButton');
        var underlineButton = document.getElementById('underlineButton');
        var strikeButton = document.getElementById('strikeButton');

        var orderedListButton = document.getElementById('orderedListButton');
        var bulletListButton = document.getElementById('bulletListButton');

        var directionButton = document.getElementById('directionButton');

        var alignLeftButton = document.getElementById('ql-align-left');
        var alignCenterButton = document.getElementById('ql-align-center');
        var alignRightButton = document.getElementById('ql-align-right');
        var alignJustifyButton = document.getElementById('ql-align-justify');
        
        // The mutation observer
        var boldObserver = new MutationObserver(function() { classChanged(boldButton); });
        boldObserver.observe(boldButton, { attributes: true, attributeFilter: ["class"]});

        var italicObserver = new MutationObserver(function() { classChanged(italicButton); });
        italicObserver.observe(italicButton, { attributes: true, attributeFilter: ["class"] });

        var underlineObserver = new MutationObserver(function () { classChanged(underlineButton); });
        underlineObserver.observe(underlineButton, { attributes: true, attributeFilter: ["class"] });

        var strikeObserver = new MutationObserver(function () { classChanged(strikeButton); });
        strikeObserver.observe(strikeButton, { attributes: true, attributeFilter: ["class"] });

        var orderedListObserver = new MutationObserver(function () { classAndValueChanged(orderedListButton); });
        orderedListObserver.observe(orderedListButton, { attributes: true, attributeFilter: ["class"] });

        var bulletListObserver = new MutationObserver(function () { classAndValueChanged(bulletListButton); });
        bulletListObserver.observe(bulletListButton, { attributes: true, attributeFilter: ["class"] });

        var directionObserver = new MutationObserver(function () { classChanged(directionButton); });
        directionObserver.observe(directionButton, { attributes: true, attributeFilter: ["class"] });

        var alignmentObserver = new MutationObserver(function () { alignmentDataValueChanged(alignLeftButton); });
        alignmentObserver.observe(alignLeftButton, { attributes: true, attributeFilter: ["class"] });

        var alignmentObserverCenter = new MutationObserver(function () { alignmentDataValueChanged(alignCenterButton); });
        alignmentObserverCenter.observe(alignCenterButton, { attributes: true, attributeFilter: ["class"] });

        var alignmentObserverRight = new MutationObserver(function () { alignmentDataValueChanged(alignRightButton); });
        alignmentObserverRight.observe(alignRightButton, { attributes: true, attributeFilter: ["class"] });

        var alignmentObserverJustify = new MutationObserver(function () { alignmentDataValueChanged(alignJustifyButton); });
        alignmentObserverJustify.observe(alignJustifyButton, { attributes: true, attributeFilter: ["class"] });

        function classChanged(button) {
            window.external.notify(`${button.className}`);
        }

        function classAndValueChanged(button) {
            window.external.notify(`${button.id} ${button.className}`);
        }

        function alignmentDataValueChanged(button) {
            if (button.className.endsWith('ql-active'))
                window.external.notify(`${button.id}`);
        }

        function RenderHTML(htmlString) {
            quill.root.innerHTML = htmlString;
            // quill.clipboard.dangerouslyPasteHTML(htmlString);
            // const delta = quill.clipboard.convert(htmlString)

            // quill.setContents(delta, 'silent')

            // document.getElementById('mail-container-parent').hidden = false;
            // document.getElementById('editor-container').innerHTML = htmlString;
        }

        // function ShowToolbar() {
        //     document.getElementById('editor-container').style.display = 'block';
        //     quill.focus();
        // }

        // function HideToolbar() {
        //     document.getElementById('editor-container').style.display = 'none';
        // }

        function getSelectedText() {
            var range = quill.getSelection();
            if (range) 
            {
                if (range.length == 0) 
                {

                } 
                else 
                {
                    return quill.getText(range.index, range.length);
                }
            }
        }

        function addHyperlink(url)
        {
            var range = quill.getSelection();

            if (range)
            {
                quill.formatText(range.index, range.length, 'link', url);
                quill.setSelection(0,0);
            }
        }

    </script>
</body>
</html>
